"use client"

import Link from "next/link"
import { Gem } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "./theme-toggle"
import { LanguageToggle } from "./language-toggle"
import { useLanguage } from "@/context/language-context"

export function Header() {
  const { dictionary } = useLanguage()

  return (
    <header className="flex items-center justify-between h-16 px-4 border-b shrink-0 md:px-6 bg-background">
      <Link href="/" className="flex items-center gap-2 text-lg font-semibold sm:text-base">
        <Gem className="w-6 h-6" />
        <span className="sr-only">{dictionary.siteName}</span>
        <span className="hidden md:inline">{dictionary.siteName}</span>
      </Link>
      <nav className="hidden font-medium md:flex flex-row items-center gap-5 text-sm lg:gap-6">
        <Link href="/" className="text-muted-foreground hover:text-primary">
          {dictionary.home}
        </Link>
        <Link href="/products" className="text-muted-foreground hover:text-primary">
          {dictionary.products}
        </Link>
        <Link href="/collections" className="text-muted-foreground hover:text-primary">
          {dictionary.collections}
        </Link>
        <Link href="/about" className="text-muted-foreground hover:text-primary">
          {dictionary.about}
        </Link>
        <Link href="/blog" className="text-muted-foreground hover:text-primary">
          {dictionary.blog}
        </Link>
        <Link href="/contact" className="text-muted-foreground hover:text-primary">
          {dictionary.contact}
        </Link>
        <Link href="/ai-demo" className="text-muted-foreground hover:text-primary">
          {dictionary.aiDemo}
        </Link>
      </nav>
      <div className="flex items-center gap-2">
        <LanguageToggle />
        <ThemeToggle />
        <Button variant="outline" className="md:hidden bg-black text-white dark:bg-white dark:text-black">
          <span className="sr-only">Toggle navigation</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-6 w-6"
          >
            <line x1="4" x2="20" y1="12" y2="12" />
            <line x1="4" x2="20" y1="6" y2="6" />
            <line x1="4" x2="20" y1="18" y2="18" />
          </svg>
        </Button>
      </div>
    </header>
  )
}
